<template>
  <div>

    <el-row>
      <el-col :span="24">
        <!-- 放搜索条件 -->
        <el-form :inline="true" :model="drugParm" class="demo-form-inline">
          <el-form-item label="药名">
            <el-input v-model="drugParm.dsName" placeholder="请输入药名"></el-input>
          </el-form-item>
          <el-form-item label="库存<">
            <el-input v-model="drugParm.dsStock" placeholder="请输入" style="width: 100px;"></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="drugParm.dsStatus" placeholder="请选择">
              <el-option value="y" label="上架"></el-option>
              <el-option value="n" label="下架"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="药品类型">
            <el-select v-model="drugParm.dsIsPrescription" placeholder="请选择">
              <el-option value="y" label="处方药"></el-option>
              <el-option value="n" label="非处方药"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryCondition">查询</el-button>
            <el-button type="primary" @click="remove">清空</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-circle-plus-outline" @click="addDrugPage">新增药品</el-button>

          </el-form-item>
        </el-form>

      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%; ">
          <el-table-column prop="imgSrc" label="药品图片">
            <template slot-scope="scope">
              <img :src="scope.row.imgSrc" style="width: 70px; height: 70px;">
            </template>
          </el-table-column>
          <el-table-column prop="dsNo" label="药品编号" width="180">
          </el-table-column>

          <el-table-column prop="dsName" label="药名" width="150" align="center">
          </el-table-column>
          <el-table-column prop="dsBrand" label="生产商" align="center">
          </el-table-column>

          <el-table-column prop="dsInPrice" label="药品进价" align="center">
          </el-table-column>
          <el-table-column prop="dsOutPrice" label="药品售价" align="center">
          </el-table-column>
          <el-table-column prop="dsStock" label="库存" align="center">
          </el-table-column>
          <el-table-column prop="dsStatus" label="状态" align="center">
            <template slot-scope="scope">
              <span>
                {{ scope.row.dsStatus == "y" ? '上架' : '下架' }}
              </span>
            </template>

          </el-table-column>
          <el-table-column prop="dsIsPrescription" label="处方药" align="center">
            <template slot-scope="scope">
              <span>
                {{ scope.row.dsIsPrescription == "y" ? '处方药' : '非处方药' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="warning" icon="el-icon-edit" @click="upadtePage(scope.row.id)">修改</el-button>






              <el-button type="danger" icon="el-icon-delete" style="margin-left: 0;"
                @click="deleteDurg(scope.row.id)">删除</el-button>



            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24">
        <!-- 放分页 -->
        <el-pagination background :current-page="pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
          @size-change="changeSize" @current-change="changeCurrent" :total="total">
        </el-pagination>

      </el-col>
    </el-row>


    <!-- 放新增界面 -->

    <el-dialog title="新增药品" :visible.sync="drugAddVisible" @close="resetForm">
      <el-form :model="drug" :rules="rules" ref="formRef">
        <el-form-item label="药名" prop="dsName">
          <el-input v-model="drug.dsName" style="width: 270px;"></el-input>

        </el-form-item>
        <el-form-item label="生产商" prop="dsBrand" :label-width="formLabelWidth">
          <el-input v-model="drug.dsBrand" autocomplete="off" style="width: 270px;"></el-input>

        </el-form-item>
        <el-form-item label="进价" prop="dsInPrice" :label-width="formLabelWidth">
          <el-input v-model="drug.dsInPrice" autocomplete="off" style="width: 270px;"></el-input>

        </el-form-item>
        <el-form-item label="售价" prop="dsOutPrice" :label-width="formLabelWidth">
          <el-input v-model="drug.dsOutPrice" autocomplete="off" style="width: 270px;"></el-input>

        </el-form-item>
        <el-form-item label="库存" prop="dsStock" :label-width="formLabelWidth">
          <el-input v-model="drug.dsStock" autocomplete="off" style="width: 270px;"></el-input>

        </el-form-item>
        <el-form-item label="状态" prop="dsStatus" :label-width="formLabelWidth">

          <el-select v-model="drug.dsStatus" placeholder="请选择">
            <el-option value="y" label="上架"></el-option>
            <el-option value="n" label="下架"></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="类型" prop="dsIsPrescription" :label-width="formLabelWidth">
          <el-select v-model="drug.dsIsPrescription" placeholder="请选择">
            <el-option value="y" label="处方药"></el-option>
            <el-option value="n" label="非处方药"></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="医保类型" prop="dsReimbursement" :label-width="formLabelWidth">
          <el-select v-model="drug.dsReimbursement" placeholder="请选择">
            <el-option value="A" label="甲类药"></el-option>
            <el-option value="B" label="乙类药"></el-option>
            <el-option value="C" label="丙类药"></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="图片上传" label-width="100px">
          <!-- 上传组件
                action: 后端上传图片的接口地址
                show-file-list:会不会把文件名展示出来
                :on-success：上传成功后的回调函数
                :before-upload：图片上传前的回调函数(作用：做校验，大小，格式)
            -->
          <el-upload class="avatar-uploader" action="api/drug/upload" :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="imgSrc" :src="imgSrc" style="height: 100px; width: 100px;">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="drugAddVisible = false, drug = {};">取 消</el-button>
        <el-button type="primary" @click="addDrug">确 定</el-button>
      </div>
    </el-dialog>



    <!-- 放修改界面 -->

    <el-dialog title="修改药品" :visible.sync="drugUpdateVisible">
      <el-form :model="drug">
        <el-form-item label="药名">
          <el-input v-model="drug.dsName" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="生产商" :label-width="formLabelWidth">
          <el-input v-model="drug.dsBrand" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="进价" :label-width="formLabelWidth">
          <el-input v-model="drug.dsInPrice" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="售价" :label-width="formLabelWidth">
          <el-input v-model="drug.dsOutPrice" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="库存" :label-width="formLabelWidth">
          <el-input v-model="drug.dsStock" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="drug.dsStatus" placeholder="请选择">
            <el-option value="y" label="上架"></el-option>
            <el-option value="n" label="下架"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="drug.dsIsPrescription" placeholder="请选择">
            <el-option value="y" label="处方药"></el-option>
            <el-option value="n" label="非处方药"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="医保类型" :label-width="formLabelWidth">
          <el-select v-model="drug.dsReimbursement" placeholder="请选择">
            <el-option value="A" label="甲类药"></el-option>
            <el-option value="B" label="乙类药"></el-option>
            <el-option value="C" label="丙类药"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片上传" label-width="100px">
          <!-- 上传组件
                action: 后端上传图片的接口地址
                show-file-list:会不会把文件名展示出来
                :on-success：上传成功后的回调函数
                :before-upload：图片上传前的回调函数(作用：做校验，大小，格式)
            -->
          <el-upload class="avatar-uploader" action="api/drug/upload" :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="drug.imgSrc" :src="drug.imgSrc" style="height: 100px; width: 100px;">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="drugUpdateVisible = false, drug = {};">取 消</el-button>
        <el-button type="primary" @click="updateDurg">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      drugAddVisible: false,
      drugUpdateVisible: false,
      formLabelWidth: '',
      pageSize: 5,
      pageNum: 1,
      total: 0,
      tableData: [],
      drugParm: {},
      drug: {},
      token: null,
      imgSrc: '',
      errors: {
        dsName: null,
      },
      rules: {
        dsName: [
          { required: true, message: '请输入药名', trigger: 'blur' }
        ],
        dsBrand: [
          { required: true, message: '请输入生产商', trigger: 'blur' }
        ],
        dsInPrice: [
          { required: true, message: '请输入进价', trigger: 'blur' }
        ],
        dsOutPrice: [
          { required: true, message: '请输入售价', trigger: 'blur' }
        ],
        dsStock: [
          { required: true, message: '请输入库存', trigger: 'blur' }
        ],
        dsStatus: [
          { required: true, message: '请输入状态', trigger: 'blur' }
        ],
        dsIsPrescription: [
          { required: true, message: '请输入类型', trigger: 'blur' }
        ],
      }





    }
  },
  methods: {
    nextPage(val) {
      //用户点击下一页触发
      this.pageNum = val;
      this.queryList();
    },
    prevPage(val) {
      //用户点击上一页触发
      this.pageNum = val;
      this.queryList();
    },
    changeSize(val) {
      //改变每页显示的条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryList();
    },
    changeCurrent(val) {
      this.pageNum = val;
      this.queryList();
    },
    queryCondition() {
      this.pageNum = 1;
      this.queryList();
    },

    resetForm() {
      this.drug = this.createBlankDrug();
      this.$nextTick(() => {
        this.$refs.formRef.resetFields();
      });
    },
    createBlankDrug() {
      return {
        dsName: '',
        dsBrand: '',
        dsInPrice: '',
        dsOutPrice: '',
        dsStock: '',
        dsStatus: '',
        dsIsPrescription: '',
        dsReimbursement: ''
      };
    },
    // 分页加条件查询展示
    queryList() {
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = this.drugParm;
      this.$axios.post('api/drug/queryList', pageParam)
        .then(res => {
          if (res.data.code === 200) {
            let drugparam = res.data.data;
            this.tableData = drugparam.list;
            this.total = drugparam.total;
          }
        })
    },
    // 清空搜索栏
    remove() {
      this.drugParm = {};
    },
    //新增药品界面
    addDrugPage() {
      this.drugAddVisible = true;
      this.addToke();

    },
    //幂等性生成key
    addToke() {
      this.$axios.get('api/drug/getToken')
        .then(res => {
          if (res.data.code === 200) {
            this.drug.token = res.data.data;
          }
        })
    },
    //res 上传接口的返回值 file 上传的文件
    //回显有两种方式 1：URL.createObjectURL(file.raw)
    handleAvatarSuccess(res, file) {
      this.imgSrc = res.data;
    },

    // 添加药品
    addDrug() {


      this.drug.imgSrc = this.imgSrc;
      this.$axios.post('api/drug/addDrug', this.drug)
        .then(res => {
          if (res.data.code === 200) {
            this.drugAddVisible = false;
            this.$message.success("添加成功")
            this.queryList();
            this.drug = {};
          } else {
            this.$message.error("必选项为空");
          }
        })

    },

    //修改药品界面
    upadtePage(id) {
      this.$axios.get('api/drug/queryDrug/' + id)
        .then(res => {
          if (res.data.code === 200) {
            this.drug = res.data.data;
            this.drugUpdateVisible = true;
          }
        })
    },
    //修改药品
    updateDurg() {

      this.$axios.post('api/drug/updateDrug', this.drug)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("修改成功");
            this.drugUpdateVisible = false;
            this.drug = {};
            this.queryList();
          } else {
            this.$message.error("必选项为空")
          }
        })
    },
    //删除药品
    deleteDurg(id) {

      this.$axios.get('api/drug/deleteDrug/' + id)
        .then(res => {
          if (res.data.code === 200) {
            this.queryList();
          }
        })
    }
  },
  created() {
    this.queryList();
  }
}
</script>
<style scoped>
/* 全局字体和颜色 */
body {
  font-family: 'Roboto', sans-serif; /* 或者你可以选择其他的字体 */
  color: #333;
}
.el-button {
  border: none;
  box-shadow: 0 2px #888888;
}

/* 卡片样式和阴影效果 */
.el-card {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 调整输入框、按钮和选择框的圆角和边框颜色 */
.el-input, .el-button, .el-select-dropdown .el-scrollbar__view .el-select-dropdown__item, .el-select {
  border-radius: 4px;
}

/* 调整按钮的样式 */
.el-button {
  border-radius: 4px;
  font-weight: 500;
}

.el-button:focus, .el-button:hover {
  opacity: 0.9;
  box-shadow: none;
}

/* 按钮悬停效果 */
.el-button--primary:hover {
  background-color: #5e72e4;
  border-color: #5e72e4;
}

.el-button--warning:hover {
  background-color: #fbc658;
  border-color: #fbc658;
}

.el-button--danger:hover {
  background-color: #f5365c;
  border-color: #f5365c;
}

/* 调整表格中图像的边距和边框 */
.el-table .cell img {
  border-radius: 4px;
  margin-right: 10px;
}

/* 分页器样式 */
.el-pagination {
  background-color: #fff;
  padding: 10px;
  box-shadow: 0px 2px 6px #eaedf3;
  border-radius: 8px;
}

/* 对话框的样式 */
.el-dialog__header {
  background-color: #f0f2f5;
  color: #333;
}

/* 图标样式 */
.el-icon {
  vertical-align: middle;
  margin-right: 4px;
}

/* 提示框样式 */
.el-message-box {
  border-radius: 8px;
}

/* 上传组件样式 */
.avatar-uploader .el-upload {
  border-radius: 4px; /* 更圆润的按钮 */
}

/* 更改选择区域样式 */
.el-form--inline .el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}
</style>